<style lang="less" scoped>
	@import "distribution-manage";
</style>
<template>
	<Card class="site-info-container">
		<Form ref="myForm" :model="formItem" :label-width="140">
			<FormItem label="是否开启分销" prop="on">
				<i-switch :disabled="!edit" v-model="formItem.is_on"></i-switch>
			</FormItem>
			<FormItem label="直属下级返点比例" prop="gzh_appid">
				<InputNumber
					:disabled="!edit"
					:max="1000"
					:min="0"
					v-model="formItem.p_first"
					:formatter="value => `${value}‰`"
					:parser="value => value.replace('‰', '')"></InputNumber>
			</FormItem>
		</Form>
		<QAuth class="auth" :access="'admin/Distribution/save'">
			<Button slot="content" v-if="!edit" @click="toEdit">编辑</Button>
		</QAuth>
		
		<div class="site-info-btn-wrap" v-if="edit">
			<Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
			<Button type="primary" @click="submit" :loading="loading">保存</Button>
		</div>
	</Card>


</template>
<script>
  import {get, save} from '@/api/distribution'
  import QAuth from '../../components/auth.vue'

  export default {
    name: 'distribution-manage',
    components: {
      QAuth
    },
    data() {
      return {
        edit: false,
        loading: false,
        formItem: {
          is_on: false,
          on: 0,
          id: null,
          p_first: 0,
        }
      };
    },
    created() {
      this.init();
    },
    watch: {
      // 监听相同路由下参数变化的时候，从而实现异步刷新
      '$route'(to, from) {
        // 重置数据
        Object.assign(this.$data, this.$options.data());
        /** 初始化其他数据 */
        this.init();
      }
    },
    methods: {
      init() {
        this.admin = false;
        this.formItem.id = null;
        this.edit = false;
        this.getData();
      },
      cancel() {
        this.edit = false;
      },
      toEdit() {
        this.edit = true;
      },
      getData() {
        let vm = this;
        get().then(rep => {
          this.formItem = rep.data.data;
          if (vm.formItem.on === 1) {
            vm.formItem.is_on = true;
          } else {
            vm.formItem.on = 0;
            vm.formItem.is_on = false;
          }
        })
      },
      save() {
        let vm = this;
        if (vm.formItem.is_on) {
          vm.formItem.on = 1;
        } else {
          vm.formItem.on = 0;
        }
        save(this.formItem).then(rep => {
          vm.$Message.success('保存成功');
          vm.cancel();
          vm.loading = false
        },error => {
          vm.loading = false
        })
      },
      submit() {
        let vm = this;
        vm.loading = true
        vm.save();
      },
    }
  }
</script>
